<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东首页</title>
    <link rel="stylesheet" href="./轮播图.css">
    <link rel="stylesheet" href="./swiper-bundle.min.css" />

    <style>
        html {
            height: 100%;
            overflow: hidden;
        }
        
        .father-box {
            width: 100%;
            height: 100%;
            overflow: auto;
            min-width: 320px;
            margin: 0 auto;
            /* display: flex; */
            flex-direction: column;
        }
        
        a {
            color: #000;
            text-decoration: none;
        }
        
        .bigbox {
            /* overflow: hidden; */
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 280px;
            background: url(./images/3c5eab17f98a9297.png!q70.png)no-repeat;
            background-size: 100%;
            margin-bottom: 20px;
        }
        
        header {
            width: 100%;
            display: flex;
            position: fixed;
            top: 0;
            height: 60px;
            background-color: #f00;
            align-items: center;
            justify-content: space-around;
            z-index: 999;
        }
        
        .header-left {
            width: 5%;
        }
        
        .header-left img {
            width: 20px;
            height: 18px;
            position: relative;
            top: 3px;
        }
        
        .header-center {
            position: relative;
            width: 72%;
            height: 30px;
        }
        
        .header-center input {
            width: 100%;
            height: 30px;
            border-radius: 20px;
            border: none;
            text-indent: 80px;
            line-height: 30px;
        }
        
        .header-center .logo {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background: url("./images/jdlogo.png") no-repeat;
            background-size: 25px 20px;
            position: absolute;
            top: 7px;
            left: 13px;
            padding-right: 10px;
            border-right: 3px solid #aaa;
        }
        
        .header-center .search {
            content: "";
            display: block;
            width: 20px;
            height: 15px;
            background: url("./images/jd-sprites.png") no-repeat;
            background-size: 200px 200px;
            background-position: -120px 0;
            position: absolute;
            top: 10px;
            left: 55px;
            padding-right: 5px;
        }
        
        .header-right {
            width: 12%;
            font-size: 14px;
            color: #fff;
        }
        
        nav {
            display: flex;
            width: 80%;
            min-width: 320px;
            margin: 0 auto;
            height: 140px;
            margin-top: 80px;
            border: 1px solid rgba(255, 255, 255, 0.5);
            border-radius: 4px;
        }
        
        nav img {
            width: 102%;
            height: 140px;
        }
        
        main {
            display: flex;
            width: 100%;
            margin: 0 auto;
            flex-wrap: wrap;
            margin-left: 5%;
        }
        
        main .smallbox {
            display: flex;
            flex-wrap: wrap;
            width: 18%;
            font-size: 14px;
            margin-bottom: 20px;
        }
        /* main .smallbox span {
            width: 80%;
            display: block;
            text-align: center;
        } */
        
        .smallbox img {
            width: 80%;
        }
        
        .item {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }
        
        .item-picture {
            width: 46%;
            height: 50%;
            border-radius: 5px;
            border: 1px solid #fff;
        }
        
        .item-picture img {
            width: 100%;
            height: 100%;
        }
        
        .item-picture-box {
            font-size: 16px;
            position: relative;
        }
        
        .item-picture-box .price {
            display: block;
            font-size: 30px;
            color: #f62;
        }
        
        .item-picture-box .reduce {
            display: block;
            width: 60px;
            height: 20px;
            font-size: 14px;
            color: #f60;
            border: 1px solid #aaa;
        }
        
        .item-picture-box .picture {
            height: 30px;
        }
        
        .item-picture-box-price {
            display: flex;
            justify-content: space-around;
            align-items: center
        }
        
        .item-picture-box img {
            width: 60px;
            height: 20px;
            margin-top: 5px;
        }
        
        .cont {
            display: flex;
            justify-content: space-around;
        }
        
        .cont a {
            color: #fff;
            background-color: #f55;
        }
        
        footer {
            display: flex;
            justify-content: space-around;
            width: 100%;
            height: 60px;
            position: fixed;
            bottom: 0;
            left: 0;
            background-color: #fff;
            align-items: flex-end
        }
        
        .footer-box img {
            height: 50px;
        }
        
        .totop {
            display: none;
            width: 40px;
            height: 40px;
            background-color: #fff;
            color: #aaa;
            position: fixed;
            right: 20px;
            bottom: 200px;
            border-radius: 5px;
            text-align: center;
        }
        
        .totop img {
            width: 38px;
            height: 38px;
        }
    </style>
</head>

<body>
    <div class="father-box">
        <div class="bigbox">
            <header>
                <div class="header-left"><img src="./images/下载.png" alt=""></div>
                <div class="header-center"><input type="text" placeholder="家具日常">
                    <div class="logo"></div>
                    <div class="search"></div>
                </div>
                <div class="header-right"><span>登录</span></div>
            </header>
            <nav>
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="./images/q70.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/873d7faec9690788.jpg!cr_1053x420_4_0!q70.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="./images/c9ecdc96a4a5789f.jpg!cr_1053x420_4_0!q70.jpg" alt="">
                        </div>

                    </div>
                    <div class="swiper-pagination"></div>
                </div>

                <!-- Swiper JS -->
                <script src="./swiper-bundle.min.js"></script>

                <!-- Initialize Swiper -->
                <script>
                    var swiper = new Swiper(".mySwiper", {
                        pagination: {
                            el: ".swiper-pagination",
                            dynamicBullets: true,
                        },
                    });
                </script>
            </nav>
        </div>
        <main>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
            <div class="smallbox"><img src="./images/ec560dbf9b82b90b.png!q70.png" alt="">
                <span>京东超市</span></div>
        </main>
        <div class="item">
            <div class="item-picture"><img src="./images/picture1.webp" alt="">
                <div class="item-picture-box">
                    <div class="picture">
                        <img src="./images/jdcs.png" alt="">
                        <img src="./images/nhj.png" alt="">
                    </div>【直播专享】蓝月亮洗衣液,假一赔十...
                    <div class="item-picture-box-price">
                        <span class="price">￥55.00</span>
                        <span class="reduce">两件九折</span>
                    </div>
                    <div class="cont">
                        <a href="">自营</a>
                        <span>10万+条评论</span>
                        <a href="" style="background-color: #aaa;">看相似</a>
                    </div>
                </div>
            </div>
            <div class="item-picture"><img src="./images/picture2.webp" alt="">
                <div class="item-picture-box">
                    <div class="picture">
                        <img src="./images/jdcs.png" alt="">
                        <img src="./images/nhj.png" alt="">
                    </div>【直播专享】蓝月亮洗衣液,假一赔十...
                    <div class="item-picture-box-price">
                        <span class="price">￥55.00</span>
                        <span class="reduce">两件九折</span>
                    </div>
                    <div class="cont">
                        <a href="">自营</a>
                        <span>10万+条评论</span>
                        <a href="" style="background-color: #aaa;">看相似</a>
                    </div>
                </div>
            </div>
            <div class="item-picture"><img src="./images/picture3.webp" alt="">
                <div class="item-picture-box">
                    <div class="picture">
                        <img src="./images/jdcs.png" alt="">
                        <img src="./images/nhj.png" alt="">
                    </div>【直播专享】蓝月亮洗衣液,假一赔十...
                    <div class="item-picture-box-price">
                        <span class="price">￥55.00</span>
                        <span class="reduce">两件九折</span>
                    </div>
                    <div class="cont">
                        <a href="">自营</a>
                        <span>10万+条评论</span>
                        <a href="" style="background-color: #aaa;">看相似</a>
                    </div>
                </div>
            </div>
            <div class="item-picture"><img src="./images/picture4.webp" alt="">
                <div class="item-picture-box">
                    <div class="picture">
                        <img src="./images/jdcs.png" alt="">
                        <img src="./images/nhj.png" alt="">
                    </div>【直播专享】蓝月亮洗衣液,假一赔十...
                    <div class="item-picture-box-price">
                        <span class="price">￥55.00</span>
                        <span class="reduce">两件九折</span>
                    </div>
                    <div class="cont">
                        <a href="">自营</a>
                        <span>10万+条评论</span>
                        <a href="" style="background-color: #aaa;">看相似</a>
                    </div>
                </div>
            </div>


        </div>
        <footer>
            <div class="footer-box"><img src="./images/footer01.png" alt=""></div>
            <div class="footer-box"><img src="./images/footer02.png" alt=""></div>
            <div class="footer-box"><img src="./images/footer03.png" alt=""></div>
            <div class="footer-box"><img src="./images/footer04.png" alt=""></div>
            <div class="footer-box"><img src="./images/footer05.png" alt=""></div>
        </footer>
        <div class="totop"><img src="./images/下载2.png" alt=""></div>
    </div>
    <script>
        let totop = document.querySelector(".totop")
        let timerId = null
        window.addEventListener("scroll", function() {
            console.log("11");
            if (document.documentElement.scrollTop >= 200) {
                totop.style.display = "block"
            } else {
                totop.style.display = "none"
            }
        })

        totop.addEventListener("click", function() {
            console.log("1");

            timerId = setInterval(function() {

                document.documentElement.scrollTop -= 20
                if (document.documentElement.scrollTop <= 0) {
                    document.documentElement.scrollTop = 0
                    clearInterval(timerId)
                    timerId = null

                }
            }, 20)

        })
    </script>
    <script src="./轮播图.js"></script>
</body>

</html>